<div class="toolbar margin-bottom btn-and-search" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="14" nzLg="14" nzXl="18">
    <button nz-button nzType="primary" (click)="addPermission()" class="margin-right">
      <i nz-icon nzType="plus" nzTheme="outline"></i>添加
    </button>
    <button nz-button (click)="refresh()">
      <i nz-icon nzType="redo" nzTheme="outline"></i>刷新
    </button>
  </div>

<!--  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="10" nzLg="10" nzXl="6">-->
<!--    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">-->
<!--      <input type="text" nz-input placeholder="请输入账号/姓名/手机号" [(ngModel)]="pageHelper.keyword"/>-->
<!--    </nz-input-group>-->
<!--    <ng-template #suffixIconButton>-->
<!--      <button nz-button nzType="primary" nzSearch (click)="findStaffList(code)"><i nz-icon nzType="search"></i></button>-->
<!--    </ng-template>-->
<!--  </div>-->

</div>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-tabset nzType="card" [nzSelectedIndex] = "tabsIndex" (nzSelectedIndexChange) = "selectedIndexChange($event)">
    <nz-tab nzTitle="PC网页">
    </nz-tab>
    <nz-tab nzTitle="商户小程序">

    </nz-tab>

  </nz-tabset>
</div>


<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #expandTable nzBordered [nzFrontPagination]="false" [nzData]="listOfMapData"
            nzTableLayout="fixed"  [nzScroll]="{ x: '1150px', y: '700px' }">
    <thead>
    <tr>
      <th >名称</th>
      <th nzEllipsis>缩写名称</th>
      <th nzEllipsis>类型</th>
      <th nzEllipsis>导航</th>
      <th>URL</th>
      <th nzEllipsis>请求方法</th>
      <th nzEllipsis>排序</th>
      <th nzRight>商家分配权限</th>
      <th nzRight>状态</th>
      <th nzRight>操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of expandTable.data">
      <ng-container *ngFor="let item of mapOfExpandedData[data.id]">
        <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
          <td
              [nzIndentSize]="item.level * 20"
              [nzShowExpand]="!!item.children"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="baseService.zorro.collapse(mapOfExpandedData[data.key], item, $event)"
          >
            <i nz-icon nzType="{{ item.icon }}" nzTheme="outline"></i>
            {{ item.title }}
            <nz-tag *ngIf="item.noAuth == true" [nzColor]="'green'">免</nz-tag>
            <div>
              <nz-switch [ngModel]="item.noAuth" nzCheckedChildren="免" nzUnCheckedChildren="不免" (ngModelChange)="noAuthChange($event,item.id)"></nz-switch>
            </div>
          </td>
          <td nzEllipsis>
            <input nz-input #titleSimplify value="{{item.titleSimplify}}" (blur)="updateTitleSimplify(titleSimplify.value,item)"/>
          </td>
          <td nzEllipsis>
            <nz-tag *ngIf="item.type==1" [nzColor]="'magenta'">菜单</nz-tag>
            <nz-tag *ngIf="item.type==2" [nzColor]="'purple'">权限</nz-tag>
          </td>
          <td nzEllipsis>
            <nz-switch [ngModel]="item.nav" nzCheckedChildren="是" nzUnCheckedChildren="否" (ngModelChange)="navChange($event,item.id)"></nz-switch>
          </td>
          <td>{{ item.url }}</td>
          <td nzEllipsis>{{ item.method }}</td>
          <td nzEllipsis>
            <input nz-input #sort value="{{item.sort}}" (blur)="updateSort(sort.value,item)"/>
          </td>
          <td>
            <div>
              <nz-tag *ngIf="item.openSetting == 1" [nzColor]="'green'">开放</nz-tag>
              <nz-tag *ngIf="item.openSetting == 0" [nzColor]="'error'">不开放</nz-tag>
            </div>
            <div class="margin-10">
              <nz-switch [ngModel]="item.openSetting" nzCheckedChildren="开放" nzUnCheckedChildren="不开放" (ngModelChange)="openSettingChange($event,item.id)"></nz-switch>
            </div>
          </td>
          <td>
            <nz-tag *ngIf="item.status == 1" [nzColor]="'green'">上架</nz-tag>
            <nz-tag *ngIf="item.status == 0" [nzColor]="'error'">下架</nz-tag>
          </td>
          <td>
            <a (click)="update(item)">
              <i nz-icon nzType="edit" nzTheme="twotone" [nzTwotoneColor]="'#52C41A'" nz-tooltip
                 nzTooltipTitle="编辑权限" nzTooltipPlacement="bottom"></i>
            </a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="delete(item.id)">
              <i nz-icon nzType="delete" nzTheme="twotone" [nzTwotoneColor]="'#F5222D'" nz-tooltip
                 nzTooltipTitle="删除权限" nzTooltipPlacement="bottom"></i>
            </a>

            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="addChildren(item)">
              <i nz-icon nzType="plus-square" nzTheme="twotone" [nzTwotoneColor]="'#1890FF'" nz-tooltip
                 nzTooltipTitle="添加下级" nzTooltipPlacement="bottom"></i>
            </a>
          </td>
        </tr>
      </ng-container>
    </ng-container>
    </tbody>
  </nz-table>

</div>

<app-permission-edit #edit [isVisible]="isVisible"
                     (emit)="setVisible($event)"
                     [parentPermission]="parentPermission"
                     [selfPermission]="selfPermission"
                     [platformType]="platformType">
</app-permission-edit>
